<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="onClickReset">
        <el-form-item label="代理搜索">
          <el-input v-model="state.params.keyword" clearable placeholder="请输入代理账号名、手机号" style="width: 250px" />
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="state.params._timeArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <el-button type="primary" @click="giveCodeGrant">赠送码发放</el-button>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </KToolbar>

      <KTable v-bind="tableState" v-on="tableEvent">
        <template #code="s">
          <el-link type="primary" @click="onClickCodeList(s.row)">{{ s.row.gift_code_count }} / {{ s.row.exchange_code_count }}</el-link>
        </template>
        <template #user="s">
          <el-link type="primary" @click="onClickUserList(s.row)">{{ s.row.new_user_count }} / {{ s.row.old_user_count }}</el-link>
        </template>
        <template #order_count="s">
          <el-link type="primary" @click="onClickTotalList(s.row)">{{ s.row.order_count }}</el-link>
        </template>

        <template #actions="s">
          <el-link type="primary" @click="onClickMoneyManage(s.row)"> 账户金额管理 </el-link>
          <el-link type="primary" @click="onClickBond(s.row)"> 调整保证金 </el-link>
          <el-link type="primary" @click="onClickRewards(s.row)"> 赠送奖励金 </el-link>
          <el-link type="primary" @click="onClickHandleList(s.row)"> 操作记录 </el-link>
        </template>
      </KTable>
    </div>
    <!-- 调整保证金 -->
    <AdjustBondModal ref="adjustBondModal" @success="methods.getList" />
    <!-- 赠送奖励金-->
    <EditRewardsModal ref="editRewardsModal" @success="methods.getList" />
    <!-- 操作记录-->
    <OperationListModal ref="operationListModal" />
    <!-- 账号金额管理-->
    <AccountManageModal ref="accountManageModal" :row-data="rowData" @success="accountManageSuccess" />
    <!-- 赠送码发放 -->
    <GiftCodeGrantModal ref="giftCodeGrantModal" @success="methods.getList" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Download } from '@element-plus/icons-vue';
import { useTableList } from './hooks/use-table';
import { colonelListExport } from '@/api/crm-kgj/download';
import AdjustBondModal from './components/adjust-bond-modal.vue';
import OperationListModal from './components/operation-list-modal.vue';
import AccountManageModal from './components/account-manage-modal.vue';
import EditRewardsModal from './components/edit-rewards-modal.vue';
import GiftCodeGrantModal from './components/gift-code-grant-modal.vue';
import { AuthCode, hasPermission } from '@/modules/auth';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjAgentAgentList' });
const { state, tableState, tableEvent, ...methods } = useTableList({});
const onClickExportData = () => {
  colonelListExport({
    ...state.params,
    extend_type: 1
  });
};
const router = useRouter();
// === 操作 ===
// 跳转订单总数
const onClickCodeList = (row: any) => {
  router.push({
    name: 'AgencyKgjAgentExchangeCodeList',
    query: {
      id: row.colonel_id
    }
  });
};
//
const onClickUserList = (row: any) => {
  const { name, colonel_id } = row;
  router.push({
    name: 'AgencyKgjAgentExchangeUserList',
    query: {
      name,
      colonelId: colonel_id
    }
  });
};
//
const onClickTotalList = (row: any) => {
  router.push({
    name: 'AgencyKgjAgentAgentOrder',
    query: {
      id: row.colonel_id
    }
  });
};
// 账户金额管理
const rowData = ref<Record<string, any>>({});
const accountManageModal = ref();
const onClickMoneyManage = (row: any) => {
  accountManageModal.value.show(1, row);
  rowData.value = row;
};
const accountManageSuccess = async () => {
  await methods.getList();
  const data = tableState.value.data;
  data.forEach((item: any) => {
    if (item.colonel_id === rowData.value.colonel_id) {
      rowData.value = item;
    }
  });
};
// 调整保证金
const adjustBondModal = ref();
const onClickBond = (row: any) => {
  adjustBondModal.value.show(1, row);
};
// 赠送奖励金
const editRewardsModal = ref();
const onClickRewards = (row: any) => {
  if (hasPermission(AuthCode.AGENCY_AGENT_GIFT_BALANCE)) {
    editRewardsModal.value.show(1, row);
  }
};
// 操作记录
const operationListModal = ref();
const onClickHandleList = (row: any) => {
  operationListModal.value.show(2, row);
};
// 赠送码发放
const giftCodeGrantModal = ref();
const giveCodeGrant = () => {
  if (hasPermission(AuthCode.AGENCY_AGENT_GIFT_CODE)) {
    giftCodeGrantModal.value.show(0);
  }
};
// 重置
const onClickReset = () => {
  methods.onReset();
};

</script>
